<template>
  <div>
    <div class="box_bg">
      <ScaleBox class="bg" :width="1024" :height="768" bgc="#00060f" :delay="100" :isFlat="false">
        <div class="main-container chemicalProcess">
          <div class="center_">
            <div class="nav_title">人工智能种植</div>
          </div>
          <div class="center_">
            <div class="boxs">
              <div class="aic">
                上机位通信状态:
                <div class="content_box">连接中</div>
              </div>

              <div class="aic">
                控制模式:
                <div class="content_box" @click="saveControlModel(item.value)" :class="controlModel == item.name ? 'active' : ''" v-for="item in controlList" :key="item">{{ item.name }}</div>
              </div>
              <div class="aic">
                最新调控记录:
                <div class="content_box record">
                  <div class="record_box" v-for="item in regulationList" :key="item.id">
                    <div style="margin-top: 10px">{{ item.executeTime }} {{ item.content }}</div>
                  </div>
                </div>
              </div>
              <div class="aic">
                最新告警记录:
                <div class="content_box record">
                  <div class="record_box" v-for="item in alarmList" :key="item.id">
                    <div style="margin-top: 10px; color: red">{{ item.executeTime }} {{ item.content }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="center_">
            <div class="bottom">
              <div @click="getIndx(item.src)" class="bottom_box" v-for="(item, index) in boxList" :key="index">
                <img class="nav_img" :src="item.img" alt="" />
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </ScaleBox>
    </div>
  </div>
</template>
<script>
// import store from '@/store'
import echarts from 'echarts'
import { getAiAsk } from '@/api/system'
import ScaleBox from 'vue2-scale-box'
import moment from 'moment'
import { getControlModel, getGhLogList, saveControlModel } from '@/api/system'
export default {
  components: {
    ScaleBox
  },
  data() {
    return {
      indexc: 0,
      boxList: [
        {
          img: require('../../../assets/home_active.png'),
          name: '首页'
        },
        {
          img: require('../../../assets/jc.png'),
          src: '/home/onlineMonitoring',
          name: '在线监测'
        },
        {
          img: require('../../../assets/kz.png'),
          name: '控制模式',
          src: '/home/controlMode'
        },
        {
          img: require('../../../assets/xt.png'),
          name: '系统参数',
          src: '/home/system'
        }
      ],
      controlList: [
        { name: '手动控制模式', value: 0 },
        { name: '定时控制模式', value: 1 },
        { name: 'AI控制模式', value: 2 }
      ],
      controlModel: '',
      alarmList: [],
      regulationList: []
    }
  },
  mounted() {
    this.getControlModel()
    this.getGhLogList(0)
    this.getGhLogList(1)
  },
  beforeDestroy() {},
  methods: {
    //获取温室调控任务执行日志列表
    getGhLogList(val) {
      let form = {
        pageNum: 1,
        pageSize: 30,
        type: val
      }
      getGhLogList(form).then(res => {
        if (res.code == 200) {
          if (val == 0) {
            this.regulationList = res.data
          } else {
            this.alarmList = res.data
          }
        }
      })
    },
    //改变当前控制模式
    saveControlModel(val) {
      saveControlModel({ type: val }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.getControlModel()
        }
      })
    },
    //获取当前控制模式
    getControlModel() {
      getControlModel().then(res => {
        if (res.code == 200) {
          this.controlModel = res.data
        }
      })
    },
    getIndx(val) {
      console.log(val)

      this.$router.push({
        path: val
      })
    }
  }
}
</script>
<style lang="less" scoped>
.bg {
  background: url('../../../assets/bg_.png') no-repeat center center;
  // width: 100vw;
  height: 100vh;
  width: 100vw;
  // background-color: #05032e;
  /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
  background-size: cover;
}
.box_bg {
  background-color: #011e7b !important;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.center_ {
  display: flex;
  justify-content: center;
  .nav_title {
    font-family: 'MyCustomFont', sans-serif;
    display: flex;
    justify-content: center;
    // background: url('../assets/title.png') no-repeat center center;
    position: absolute;
    top: 20px;
    font-size: 42px;
    color: #ffffff;
    line-height: 58px;
    text-align: justify;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #0771ff 97%, #006dff 100%);
    -webkit-background-clip: text;
    color: transparent;

    .nav_t {
      font-weight: bolder;
      font-size: 34px;
      color: #3de6ff;
      line-height: 48px;
      text-align: center;
      font-style: normal;
      background: linear-gradient(90deg, #ffffff 0%, #02c2cb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #cceaf8; /* 设置滑块的背景颜色 */
  height: 12px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}
/deep/.el-input-group__append {
  background-color: #387dff;
  color: #ffffff;
  cursor: pointer;
}
/deep/.el-input__icon {
  font-size: 42px;
  margin-top: 25px;
}
/deep/ .el-input__inner {
  font-weight: bold;
  font-size: 42px;
  color: #999999;
  text-align: left;
  height: 100px;
  font-style: normal;
  border: none;
  border-radius: 9px;
  padding-left: 60px;
  background: rgba(11, 63, 173, 0.72);
  border-radius: 20px 0 0 20px;
  border-image: radial-gradient(circle, rgba(51, 201, 255, 1), rgba(31, 104, 198, 1), rgba(102, 188, 255, 1)) 3 3;
}
.boxs {
  position: absolute;
  top: 115px;
  width: 957px;
  height: 539px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(11.02941176470588px);
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  padding: 40px;
  .content_box {
    min-width: 138px;
    padding: 20px;
    height: 54px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 24px;
    background: #2a3549;
    color: #0569ff;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .active {
    background: #0569ff;
    color: #fff;
  }
  .record {
    width: 673px;
    height: 146px;
    background: #2a3549;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    flex-flow: column;
    overflow-y: scroll;
    .record_box {
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      text-align: left;
      width: 100%;
    }
  }
}
.aic {
  display: flex;
  align-items: center;
  min-height: 80px;
}
.bottom {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: space-around;
  width: 957px;
  .bottom_box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 175px;
    height: 63px;
    border-radius: 8px;
    border: 1px solid #2a3549;
    cursor: pointer;
    font-size: 24px;
    color: #ffffff;
    .nav_img {
      width: 44px;
      height: 44px;
    }
  }
  .bottom_box:nth-child(1) {
    border: 1px solid #006dff;
    color: #006dff;
  }
}
@font-face {
  font-family: 'MyCustomFont'; /* 定义字体的名称 */
  src: url('../../../assets/tt.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}
</style>
